<template>
  <div class="box">
    <div
      class="title"
      style="
        display: flex;
        justify-content: center;
        align-items: center;
        width: 90%;
        padding: 10px;
        font-size: 40px;
        margin-top: 0;
      "
    >
      《信息技术》评价系统—AI足弓识别任务得分
    </div>
    <div class="box1">
      <div class="chart1">
        <div class="title">知行组</div>
        <div id="chart1"></div>
      </div>
      <div class="chart2">
        <div class="title">好学组</div>
        <div id="chart2"></div>
      </div>
      <div class="chart3">
        <div class="title">善学组</div>
        <div id="chart3"></div>
      </div>
      <div class="chart4">
        <div class="title">崇学组</div>
        <div id="chart4"></div>
      </div>
      <div class="chart5">
        <div class="title">思行组</div>
        <div id="chart5"></div>
      </div>
      <div class="chart6">
        <div class="title">力行组</div>
        <div id="chart6"></div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted } from "vue";
import * as echarts from "echarts";

const dataList = [
  {
    name: "知行组",
    data: [35, 20, 10, 15],
  },
  {
    name: "好学组",
    data: [40, 20, 10, 12],
  },
  {
    name: "善学组",
    data: [45, 15, 10, 15],
  },
  {
    name: "力行组",
    data: [55, 10, 10, 15],
  },
  {
    name: "思行组",
    data: [40, 20, 20, 15],
  },
  {
    name: "崇学组",
    data: [40, 20, 15, 15],
  },
];

const getCharts = () => {
  for (let i = 0; i < 6; i++) {
    const domMap = document.getElementById("chart" + (i + 1));
    // 清除Echarts默认添加的属性
    domMap.removeAttribute("_echarts_instance_");
    const chart = echarts.init(domMap);
    const option = getOption(dataList[i].name, dataList[i].data);
    chart.setOption(option);
  }
};

const getOption = (name, data) => {
  const option = {
    title: {
      text: (data[0] + data[1] + data[2] + data[3]).toFixed(2) + "分",
      textStyle: {
        color: "white",
        fontSize: 26,
      },
      top: 10,
      left: "center",
    },
    tooltip: {
      trigger: "item",
    },
    xAxis: {
      data: ["AI工具应用", "任务成效", "特色创新", "职业素养"],
      axisLabel: {
        textStyle: {
          fontSize: 15,
          color: "white",
        },
      },
    },
    yAxis: [
      {
        position: "left",
        max: 100,
        min: 0,
        axisLine: {
          lineStyle: {
            color: "white",
          },
        },
      },
    ],
    series: [
      {
        // name: 'AI工具应用',
        type: "bar",
        data: data,
        colorBy: "data",
        barWidth: 50,
        label: {
          normal: {
            show: true, //开启显示
            position: "top", //柱形上方
            textStyle: {
              //数值样式
              color: "#fff",
            },
          },
        },
      },
    ],
  };
  return option;
};

onMounted(() => {
  getCharts();
});
</script>

<style lang="scss" scoped>
.box {
  width: 100%;
  height: 100%;
  background-color: #2d4351;
  color: rgb(255, 255, 255);

  .box1 {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    flex-wrap: wrap;

    & > div {
      margin: 10px 0;
      background-color: #324374;
      width: 630px;
      box-shadow: 0 0 10px rgb(34, 31, 38);
      border-radius: 5px;

      & > div:last-child {
        height: 300px;
      }
    }
  }
}

.title {
  margin: 10px;
  width: 90%;
  text-align: center;
  font-size: 30px;
  background-color: rgb(129, 66, 158);
  border-radius: 10px;
  margin: 10px auto;
}
</style>
